<template>
          <el-row :gutter="12">
      <el-col :span="24">
        <el-card shadow="always">
            <el-button type="primary" icon="el-icon-search" @click="showCard">新增</el-button> 
            <el-divider></el-divider>
            <el-table
    :data="menuList"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"

    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="id"
      label="id"
      width="180">
    </el-table-column>
    <el-table-column
      prop="title"
      label="菜单名称"
      width="180">
    </el-table-column>

    <el-table-column
      prop="icon"
      label="图标" v-slot="props">
      <template>
        <i :class="props.row.icon"></i>
      </template>
    </el-table-column>

    <el-table-column
      prop="url"
      label="地址"
      width="180">
    </el-table-column>
    <el-table-column
      prop="type"
      label="状态"
     v-slot="props">
     <template>
       <el-button v-if="props.row.status == 1" type="success" plain sizi="mini">正常</el-button>
       <el-button v-else type="danger" plain sizi="mini">禁用</el-button>
     </template>
    </el-table-column>
    <el-table-column
      prop="status"
      label="操作">
      <el-button type="success" icon="el-icon-edit" circle sizi="mini"></el-button>
      <el-button type="danger" icon="el-icon-delete" circle sizi="mini"></el-button>
    </el-table-column>
  </el-table>
    <Model :showFlag1="showFlag" @menuaa="menuaa"></Model>
        </el-card>
      </el-col>

 
    </el-row>
</template>

<script>
import {mapState,mapActions} from "vuex"
import Model from './Model'
export default {
  components:{
    Model
  },
  computed:{
    ...mapState({menuList:state=>state.menu.menuList})
  },
  data() {
   return {
    //  menuData:[]
    showFlag:{status:false},
     
        menuData:[
       
        ]
      }
   },
  created(){
  this.menuListAction()
},  
  methods: {
      ...mapActions("menu",["menuListAction"]),
      showCard(){
      this.showFlag.status = true
      }, 
      menuaa(){
        this.menuListAction()
      }
    },
}
</script>

<style>
.el-card{
    text-align: left;
}
</style>